<template>
    <div v-if="showAlert" class="alert-main">
        <div class="alert-layout"></div>
        <div class="alert-container"
             :class="{'alert-success':type==1,'alert-error':type==2,'alert-info':type==3,'alert-confirm':type==9}">
            <div class="alert-header">
                {{headerTxt}}
                <span class="alert-remove" @click="hide()"><i class="el-icon-close"></i></span>
            </div>
            <div class="alert-body">
                <div>{{bodyTxt}}</div>
            </div>
            <div v-if="type==9" class="alert-footer">
                <div>
                    <el-button type="danger" @click="confirm()">确定</el-button>
                    <el-button type="info" @click="hide()">关闭</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data(){
      return {
          showAlert:false,
          headerTxt:'',
          bodyTxt:'',
          type:1,//1-成功 2-错误 9-确认
          isAutoHide:false, //是否自动关闭
          autoHideTimeout: 1500,
      }
  },
  methods:{
      show(){
          this.showAlert = true;
          if(this.type!=9){
              this.setAutoHide();
          }
      },
      hide(){
          this.showAlert = false;
          this.clearTimer();
      },
      confirm(){
          this.hide();
          if(this.onConfirm && this.onConfirm instanceof Function){
              this.onConfirm();
          }
      },
      //自动关闭
      setAutoHide(){
          let thisObj = this;
          thisObj.clearTimer();

          if(thisObj.isAutoHide){
              thisObj.timer = setTimeout(() => {
                  thisObj.hide();
              }, thisObj.autoHideTimeout);
          }
      },
      clearTimer(){
          if(this.timer){
              clearTimeout(this.timer);
              this.timer = null;
          }
      },
      bindDrag(){
        this.container = this.$el.getElementsByClassName('alert-container')[0];
        let header =  this.$el.getElementsByClassName('alert-header')[0];
        header.addEventListener('mousedown',this.mouseDown);
      },
    mouseDown(event){
        event = event || window.event;
        event.preventDefault();

        let rect = this.container.getBoundingClientRect();
        this.w = rect.width;
        this.h = rect.height;

        this.x = rect.left;
        this.y = rect.top;

        this.startX = event.screenX - rect.left;
        this.startY = event.screenY - rect.top;


        this.container.style.position = 'absolute';
        this.container.style.left = rect.left + 'px';
        this.container.style.top = rect.top + 'px';

        document.addEventListener('mousemove',this.mousemove);
        document.addEventListener('mouseup',this.mouseup);
    },
    mousemove(event){
        event = event || window.event;
        this.x = event.screenX - this.startX;
        this.y = event.screenY - this.startY;

        if(this.y <= 0){
            this.y = 0;
        }

        if(this.y + this.h > window.innerHeight){
            this.y = window.innerHeight - this.h;
        }

        if(this.x <= 0){
            this.x = 0;
        }

        if(this.x + this.w > window.innerWidth){
            this.x = window.innerWidth - this.w;
        }

        this.container.style.left = this.x + 'px';
        this.container.style.top = this.y + 'px';
    },
    mouseup(event){
        document.removeEventListener('mousemove',this.mousemove);
        document.removeEventListener('mouseup',this.mouseup);
    }
  },
  created(){
      this.timer = null;
  },
  mounted(){
    this.startX = 0;
    this.startY = 0;
    this.x = 0;
    this.y = 0;
    this.w = 0;
    this.h = 0;
    this.container = null;
  },
  destroyed(){
      if(this.$el.remove){
         this.$el.remove();
      }
      else{
         this.$el.parentNode.removeChild(this.$el);
      }
  },
  watch:{
      showAlert(val){
            if(val){
                this.$nextTick(()=>{
                    this.bindDrag();
                })
            }
        }
  }
}
</script>

<style scoped>
.alert-main{
        position: fixed;top:0;left:0;right: 0;bottom: 0;z-index: 9999;
        display: flex;align-items: center;justify-content: center;}

.alert-main .alert-layout{
            position: absolute;top:0;left:0;right: 0;bottom: 0;z-index: 1;
            background-color: #000;opacity: 0.5;z-index: 1
        }
.alert-main  .alert-container{
            border-radius: 5px;overflow: hidden;max-width: 800px;min-width: 400px;
            position: relative;z-index: 2;background-color: white;}
.alert-main .alert-container .alert-header{
                position: relative;cursor: move;
                height: 48px;line-height: 48px;padding-left: 10px;
                border-bottom: 1px solid #e5e5e5;  }
  .alert-main .alert-container .alert-header  .alert-remove{
                    display: inline-block;
                    float: right;width: 40px;text-align: center;cursor: pointer;}
  .alert-main .alert-container .alert-header  .alert-remove .el-icon-close{font-weight: 900;}

   .alert-main .alert-container .alert-body{
        padding: 15px 10px;min-height: 54px;max-height: 400px;overflow-y:auto;
        border-bottom: 1px solid #e5e5e5;}

     .alert-main .alert-container  .alert-footer{
                        padding: 10px;text-align: right;
                    }

    .alert-main .alert-info .alert-header{background-color: #2a79b4;color: white;}

    .alert-main .alert-info .alert-remove .el-icon-close{color: #226394;}

   .alert-main .alert-success .alert-header{background-color: #2a79b4;color: white;}
        .alert-main .alert-success .alert-header .alert-remove .el-icon-close{color: #226394;}

    .alert-main .alert-error .alert-header {background-color: #e1554e;color: white;}
    .alert-main .alert-error .alert-header .alert-remove .alert-remove {
                    .el-icon-close{color: #b94640;}
                }
    .alert-main .alert-comfirm .alert-header{background-color: #fff;color: #000;}
    .alert-main .alert-comfirm .alert-header .alert-remove .el-icon-close{color: #c6c4c4;}
</style>
